import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import { Box } from '@mui/material';
import { useRouter } from 'next/router';

import { useGetThemeStateStore } from '../stores/theme';

interface Props {
    route: string;
    label: string;
}

const PageBackButton = (props: Props) => {
    const router = useRouter();
    const { titleColor,txtColor2 } = useGetThemeStateStore();
    return (
        <Box display={'flex'} justifyContent={'space-between'} >
            <Box
                display={'flex'}
                sx={{ cursor: 'pointer' }}
                onClick={() => {
                    if(props.route!=null){
                        router.push(props.route)
                    }else {
                        router.back();
                    }
                }}
            >
                <ArrowBackRoundedIcon sx={{
                    color: txtColor2,
                }}/>
                <Box  style={{
                    color: txtColor2,
                    marginLeft:'8px',
                    fontWeight: '300', fontSize: '18px', lineHeight: '24px'
                }}>{props.label}</Box>
            </Box>
            {/*<HeaderButton />*/}
        </Box>
    );
};

export default PageBackButton;
